<head>
  <meta charset="utf-8" />
  <title>Tomato Pie</title>
  <style id="clock-animations-style"></style>
  <link rel="icon" href="./assets/tomato.png" />
</head>

<body>
  <!-- <button id="start-tomato">Start a tomato 🍅</button> -->
  <div class="clock-wrapper">
    <div class="clock-base">
      <div class="click-indicator">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="clock-hour"></div>
      <div class="clock-minute"></div>
      <div class="clock-center"></div>

      <div id="minite-animition-div">
        <div class="work-half"></div>
        <div class="rest-half"></div>
        <div class="done-half"></div>
        <!-- Resolve on pixal problem: https://stackoverflow.com/a/5486042/4674834 -->
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
        <div class="invisible-half"></div>
      </div>

      <div id="tomato-container"></div>
    </div>
  </div>

  <div class="sidebar">
    <div class="lists-div">
      <a class="all-todo-a"><strong>All Todos</strong></a>
      <!-- <a class="all-todo-a"><strong>Today</strong></a> -->
      <h2>Categories</h2>
      <div class="lists-list">
        <a class="selected">Todo List</a>
        <a>Tomato pie</a>
      </div>

      <input class="add-tag-input invisible" />

      <a class="add-tag-div">
        <img class="add-btn" src="./assets/addTODO.svg" />
        Add category
      </a>
    </div>

    <hr />

    <div class="settings-div">
      <h2>Settings</h2>
      <div class="info-div">
        <ul>
          <li>
            <div style="display: inline-block;">
              <input class="tgl tgl-light" id="cb1" type="checkbox" />
              <label class="tgl-btn" for="cb1"></label>
            </div>
            <img
              class="setting-ico"
              src="./assets/staticsIco.svg"
              placeholder="info"
            />
            Calendar
          </li>
          <li>
            <div style="display: inline-block;">
              <input class="tgl tgl-light" id="cb2" type="checkbox" />
              <label class="tgl-btn" for="cb2"></label>
            </div>
            <img
              class="setting-ico"
              src="./assets/textareaIco.svg"
              placeholder="info"
            />
            Text area
          </li>
          <li>
            <div style="display: inline-block;">
              <input class="tgl tgl-light" id="cb3" type="checkbox" />
              <label class="tgl-btn" for="cb3"></label>
            </div>
            <img
              class="setting-ico"
              src="./assets/defaultIco.svg"
              placeholder="info"
            />
            Default tab
          </li>
          <li>
            <div style="display: inline-block;">
              <input class="tgl tgl-light" id="cb4" type="checkbox" />
              <label class="tgl-btn" for="cb4"></label>
            </div>
            <img
              class="setting-ico"
              src="./assets/focusing.svg"
              placeholder="info"
            />
            Focusing mode
          </li>
        </ul>

        <hr />
        <div class="links">
            <!-- <a href="https://patreon.com/timqian" style="color:#7bc96f;text-decoration: none;">
              Support tomato-pie ❤ 
              </a> -->
          <a href="https://github.com/t9tio/tomato-pie/tree/master/blog">News</a>
          <a href="https://github.com/t9tio/tomato-pie/">About</a>
          <a href="https://t9t.io/#contact">Feedbacks</a>
        </div>
      </div>
    </div>
  </div>

  <div class="open-sidebar-btn">&#9776;</div>

  <div id="todo-div">
    <h1 id="todo-title">Todo List</h1>
    <ul id="list"></ul>
    <div id="input-div">
      <input id="input" placeholder="" />
      <input type="image" id="add-todo" src="./assets/addTODO.svg" />
    </div>
  </div>

  <div class="calendar invisible"></div>

  <div id="tooltip">tool tip of calendar</div>

  <div class="textarea-div invisible">
    <textarea
      class="textarea"
      placeholder="Here you can record thoughts, plans or anything you want"
      spellcheck="false"
    ></textarea>
  </div>

  <!-- The Modal -->
  <div id="myModal" class="modal">
    <!-- Modal content -->
    <div id="myModalContent" class="modal-content">
      <p>Some text in the Modal..</p>
    </div>
  </div>

  <script src="./index.js"></script>
</body>
